{% extends "Industrial_Logs/base.html" %} {% block header %} {% endblock header %} {% block content %}
<div id="topics_echarts" class="chart-container">
    <script type="text/javascript ">
        var data = [];
        var data2 = [];
        var now = +new Date(2014, 11, 29);
        var oneDay = 24 * 3600 * 1000;
        var value = Math.random() * 1000;

        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            }
        }


        function randomData2() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value + 100)
                ]
            }
        }



        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
            data2.push(randomData2());
        }
        window.onload = function() {
            //指定图表的配置项和数据
            option = {
                title: {
                    text: '仿真设备实时温度'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        params = params[0];
                        var date = new Date(params.name);
                        return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },


                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },

                series: [{
                    name: '模拟数据1',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data
                }, {
                    name: '模拟数据2',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data2
                }]
            };

            setInterval(function() {

                for (var i = 0; i < 5; i++) {
                    data.shift();
                    data.push(randomData());
                    data2.push(randomData2());
                }

                myChart.setOption({
                    series: [{
                        data: data
                    }, {
                        data: data2
                    }]
                });
            }, 1000);

            //获取dom容器
            var myChart = echarts.init(document.getElementById('topics_echarts'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>
</div>
{% endblock content %}